<template>
	<div id="login">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		</header>
		<div class="mui-content">
			<div class="login-title">
				<img src="../assets/images/center/logo.png" alt="" />
			</div>
			<form @submit.prevent="submit" autocomplete="off">
				<div class="form">
					<div class="form-item phone">
						<input type="text" v-model="formData.mobile" maxlength="11" name="" id="phone" placeholder="手机号" />
					</div>
					<div class="form-item">
						<div class="form-short-item yzm">
							<input type="text" name="" id="" placeholder="验证码" v-model="formData.code" />
							<div class="form-btn">
								<button type="button" :disabled="isDisabledGetCode || disabledPhoneCaptchaStatus" :class="className" @click.prevent="getCode">{{captchaTip}}</button>
							</div>
						</div>
					</div>
				</div>
				<button class="login" :disabled="isDisabledLogin" :class="btnClass">登录</button>
			</form>
			<div class="xieyi">我已阅读并同意
				<a>小芒用户协议</a>
			</div>
		</div>
	</div>
</template>

<script>
	import libs from "@/assets/js/libs";
	import rules from '@/assets/js/rules';
	export default {
		mounted() {

		},
		watch: {
			formData: {
				handler: function(val) {
					this.isDisabledGetCode = !rules.mobilePhone.test(val.mobile);
					this.className = rules.mobilePhone.test(val.mobile) ? 'bing' : '';
					this.isDisabledLogin = this.isDisabledGetCode || !/\d{6}/.test(val.code);
					this.btnClass = rules.mobilePhone.test(val.mobile) && /\d{6}/.test(val.code) ? 'bing' : '';
				},
				deep: true
			},
		},
		data() {
			return {
				formData: {
					mobile: '',
					code: '',
					smsId: '',
				},
				timer: null,
				disabledPhoneCaptchaStatus: false,
				isDisabledGetCode: true,
				isDisabledLogin: true,
				captchaTip: '获取验证码',
				className: '',
				btnClass: '',
			};
		},
		methods: {
			gotoPage(url) {
				//判断是否登录
				this.$router.push({
					name: url
				});
			},
			/**
			 * 获取验证码
			 */
			getCode() {
				this.formData.code = '';
				libs.request({
					url: `/actionRecord/fetch`,
					method: 'post',
					data: {
						"pageType": 3,
						"mobile": this.formData.mobile,
						"moneySearch": 6000,
						"termSearch": 3
					}
				})
				libs.request({
					url: `/sms/get`,
					method: 'post',
					data: {
						mobile: this.formData.mobile
					}
				}).then(res => {
					console.log(res);
					//					if(res.header.ret === 'S') {
					//						let time = 60;
					//						this.formData.smsId = res.data;
					//						this.disabledPhoneCaptchaStatus = true;
					//
					//						const go = () => {
					//							this.captchaTip = `${--time}秒后重新获取`;
					//							if(time === 0) {
					//								clearInterval(this.timer);
					//								this.captchaTip = '获取验证码';
					//								this.disabledPhoneCaptchaStatus = false;
					//							}
					//						};
					//
					//						go();
					//						this.timer = setInterval(go, 1000);
					//					}
				});

			},

			/**
			 * 登陆
			 */
			submit: function() {
				 this.$router.push({
		          name: 'mine'
		        });
				libs.request({
					url: `/login`,
					method: 'post',
					dataType: 'json',
					data: this.formData,
				}).then(res => {
					if(res.header.ret === 'S') {
						libs.setCookie('token', res.data.token);
						this.goto();
					}
				});
			},

		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>
<style lang="scss">
	@import "../assets/css/funcs.scss";
	@import '../assets/css/common.scss';
	#login {
		.mui-bar-nav {
			background: #fff;
			.mui-icon {
				color: #666;
			}
		}
		.mui-icon-newback {
			display: block;
			background-image: url(../assets/images/back.png);
			width: pxToRem(32px);
			height: pxToRem(32px);
			background-size: cover;
			position: relative;
			top: pxToRem(28px);
		}
		.mui-content {
			background-color: #fff;
			height: 100%;
			.login-title {
				width: pxToRem(320px);
				margin: auto;
				margin-top: pxToRem(130px);
				img {
					width: 100%;
				}
			}
			.form {
				width: 71%;
				margin: auto;
				margin-top: pxToRem(140px);
			}
			.phone {
				background-image: url(../assets/images/center/phone.png);
				background-size: 10%;
				background-position-y: 6px!important;
				background-position-x: 8px!important;
			}
			.form-short-item,
			.form-item {
				background-repeat: no-repeat;
				height: 43px;
				line-height: 43px;
				border-bottom: 1px solid #ececec;
				background-position-y: pxToRem(28px);
				background-position-x: pxToRem(28px);
				border-radius: pxToRem(4px);
				input {
					margin-left: 11%;
					border: none;
					width: 88%;
					height: 35px;
					position: relative;
					top: -2px;
					font-size: pxToRem(29px);
				}
			}
			.form>.form-item:last-child {
				margin-top: pxToRem(35px);
				font-size: pxToRem(24px);
				border: none;
				input {
					width: 44%;
				}
			}
			.form-short-item {
				background-image: url(../assets/images/center/email.png);
				background-size: 9%;
				background-position-y: 7px;
				background-position-x: 9px;
			}
			.form-btn {
				width: 40%;
				height: pxToRem(86px);
				position: relative;
				top: 0px;
				float: right;
				margin-right: 2%;
				button {
					width: 100%;
					margin: 0;
					color: #fff;
					border: none;
					height: 100%;
					background-color: #cccccc;
					border-radius: 16px;
					height: 33px;
				}
			}
			.form-btn-disable {
				background-color: #ccc;
				input {
					background-color: #ccc;
				}
			}
			.login,
			.regist {
				width: 71%;
				margin: auto;
				height: pxToRem(86px);
				line-height: pxToRem(86px);
				text-align: center;
				color: #fff;
				font-size: pxToRem(32px);
				border-radius: 4px;
				padding: 0;
				border: none;
				margin-left: 15%;
				background: linear-gradient(72deg, rgba(248, 128, 0, 1), rgba(255, 154, 10, 1));
			}
			.login {
				margin-top: pxToRem(65px);
				background: #CCCCCC;
			}
			.regist {
				margin-top: pxToRem(36px);
				background-color: #CCCCCC;
			}
			.xieyi {
				font-size: pxToRem(21px);
				color: #999999;
				text-align: center;
				width: 100%;
				position: relative;
				top: 29%;
				background-color: #fff;
				a {
					color: #FF8800;
				}
			}
			.bing {
				background: linear-gradient(72deg, #f88000, #ff9a0a);
			}
		}
	}
</style>